import React, { useState, useEffect, useRef, useMemo ,useCallback,memo} from "react";
import { BaseLayout } from "../layout/index";
import ContractList from "./children/contract-list/";
import { Link } from "react-router-dom";
import useWebSocket from "react-use-websocket";
import {useDispatch, useMappedState} from 'redux-react-hook';
//  react hook 的基本使用
const price = { head: { method: "price.unsubscribe" } }; //取消注册
 const a = {
    data: {
      contractCode: "ETHUSDT",
      spotIndexCode: "spot_index_ETHUSDT",
      fairPriceCode: "fair_price_ETHUSDT",
      spotIndexName: "ETH/USDT现货指数",
      fairPriceName: "ETH/USDT永续合理价格",
      contractName: "ETH/USDT永续",
      closeCurrency: "USDT",
      allowTrade: true,
      pause: false,
      lastPrice: "+173.40",
      lastPriceToUSD: "$173.82",
      lastPriceLegal: "$173.82",
      changePercent24: "+1.91%",
      marketPrice: "173.38",
      fairPrice: "173.34",
      price24Max: "173.40",
      price24Min: "167.65",
      amount24h: "62,254,897 USDT",
      fundRate: "0.0000%"
    }
  };
const resignPrice = {
  head: {
    method: "price.subscribe",
    conversionCurrency: "USD",
    lang: "zh-CN",
    packType: "1",
    ChangePercent: 4,
    version: "1.0",
    msgType: "request",
    timestamps: "1567433609807",
    serialNumber: "7"
  },
  param: {
    market: "ETHUSDT",
    marketCode: "ETHUSDT",
    contractCode: "ETHUSDT",
    lang: "zh-CN"
  }
};
const resignMarket = {
  head: {
    method: "market.subscribe",
    conversionCurrency: "USD",
    lang: "zh-CN",
    packType: "1",
    ChangePercent: 4,
    version: "1.0",
    msgType: "request",
    timestamps: "1567433609807",
    serialNumber: "7"
  },
  param: {
    market: "ETHUSDT",
    marketCode: "ETHUSDT",
    contractCode: "ETHUSDT",
    lang: "zh-CN"
  }
};

const resignOrder = {
  head: {
    method: "order.subscribe",
    conversionCurrency: "USD",
    lang: "zh-CN",
    packType: "1",
    ChangePercent: 4,
    version: "1.0",
    msgType: "request",
    timestamps: "1567433609807",
    serialNumber: "7"
  },
  param: {
    market: "ETHUSDT",
    marketCode: "ETHUSDT",
    contractCode: "ETHUSDT",
    lang: "zh-CN"
  }
};

const TestContract = memo(ContractList)
const Trade: React.FC = () => {
 
  const [socketUrl] = useState<string>("wss://api.hopex.com/ws");
  const [name,setName] = useState<string>('lxb');
  const mapState = useCallback(
    state => ({
        b:state.b,
        name:state.name
    }),
    []
  );
  const {b} = useMappedState(mapState);
  console.log(b)
  const dispatch = useDispatch();
  const addB = useCallback(
    () =>
      dispatch({
        type: 'add'
      }),
    [],
  );
  const options = useMemo(
    () => ({
      share: true,
      fromSocketIO: false
    }),
    []
  );
  
  const [sendMessage,lastMessage, readyState] = useWebSocket(socketUrl, options);
  const status= useMemo(()=>{
    
    if(readyState==1){
      console.log('resign')
      sendMessage(JSON.stringify(resignPrice));
      sendMessage(JSON.stringify(resignMarket));
      sendMessage(JSON.stringify(resignOrder));
    }
  },[readyState])

 

 
  // 类似componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    return () => {
      // ws.close();
      console.log('close')
      console.log(readyState)
    };
    // count 代表着  count 变化后才执行return 函数里面的东西
    //当我们第二个参数传一个空数组[]时，其实就相当于只在首次渲染的时候执行。也就是componentDidMount加componentWillUnmount的模式。不过这种用法可能带来bug，少用。
  }, [socketUrl]);
  
 console.log('trade 更新了'+lastMessage)
  return (
    <BaseLayout>
      <button onClick={addB}></button>
      {/*  合约列表*/}
      <TestContract color={true}   />
     
    </BaseLayout>
  );
};

export default memo(Trade);
